<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>FineUICore扩展（四） | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="在FineUICore扩展（三）中，为Form控件中的Field扩展了数据属性，让前后台与实体交互更方便，今天扩展一下简单的布局：在知道一行有几列的时候F.FormRow().Items()这段代码是冗余的，想象一下如果将一行三列变成一行两..." />
    <meta name="keywords" content="FineUICore" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">FineUICore扩展（四）</h2>
            <div class="post-date">2019-04-18
            
                
                  <a href="https://shixixiyue.gitee.io/tag/njETBpqXu/" class="tag">
                    FineUICore
                  </a>
                
            </div>
            
            <div class="post-content" v-pre>
              <p>在<a href="index.html#2019040101.md">FineUICore扩展（三）</a>中，为Form控件中的Field扩展了数据属性，让前后台与实体交互更方便，今天扩展一下简单的布局：在知道一行有几列的时候F.FormRow().Items()这段代码是冗余的，想象一下如果将一行三列变成一行两列要重复写一遍布局。</p>
<!-- more -->
<p><ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#%E5%AF%BC%E8%A8%80">导言</a></li>
<li><a href="#1-%E4%B8%BAfform%E6%89%A9%E5%B1%95rowsex%E5%AE%9E%E7%8E%B0%E7%AE%80%E5%8D%95%E5%B8%83%E5%B1%80">1. 为F.Form扩展RowsEx实现简单布局</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<blockquote>
<h4 id="导言">导言</h4>
<p>在<a href="index.html#2019040101.md">FineUICore扩展（三）</a>中，为Form控件中的Field扩展了数据属性，让前后台与实体交互更方便，今天扩展一下简单的布局：在知道一行有几列的时候F.FormRow().Items()这段代码是冗余的，想象一下如果将一行三列变成一行两列要重复写一遍布局。</p>
</blockquote>
<h4 id="1-为fform扩展rowsex实现简单布局">1. 为F.Form扩展RowsEx实现简单布局</h4>
<p>RowsEx方法，通过Field总数量，和一行几列（几个Field），实现自动排版（自动生成FormRow），其实实现起来不难，就是一个想法，就像我写的js，控件不用注册事件，只要按规则命名直接写实现方法一样。</p>
<p>在FineUIEx中加入RowsEx方法：</p>
<pre><code>    /// &lt;summary&gt;
    /// 通过列数简单布局
    /// &lt;/summary&gt;
    /// &lt;param name=&quot;f&quot;&gt;&lt;/param&gt;
    /// &lt;param name=&quot;clo&quot;&gt;&lt;/param&gt;
    /// &lt;param name=&quot;extensions&quot;&gt;&lt;/param&gt;
    /// &lt;returns&gt;&lt;/returns&gt;
    public static FormExtension RowsEx(this FormExtension f, int clo, params FineUICore.IControlBaseExtension[] extensions)
    {
        var F = new UIExtension&lt;dynamic, dynamic&gt;();
        string ColumnWidths = GetWidthsByClo(clo);
        //计算多少行
        int count = extensions.Length;
        double d = count / clo;
        int rowcount = Convert.ToInt32(Math.Ceiling(d));
        int c = 0;//计数还有几个没加
        //行集合
        List&lt;FormRowExtension&gt; listfr = new List&lt;FormRowExtension&gt;();
        for (int i = 0; i &lt; rowcount; i++)
        {
            List&lt;IControlBaseExtension&gt; cbs = new List&lt;IControlBaseExtension&gt;();
            for (int j = (i) * clo; j &lt; (i + 1) * clo; j++)
            {
                c++;
                cbs.Add(extensions[j]);
            }
            listfr.Add(F.FormRow().ColumnWidths(ColumnWidths).Items(cbs.ToArray()));
        }
        List&lt;IControlBaseExtension&gt; lastcbs = new List&lt;IControlBaseExtension&gt;();
        for (int i = c; i &lt; count; i++)
        {
            lastcbs.Add(extensions[i]);
        }
        listfr.Add(F.FormRow().ColumnWidths(ColumnWidths).Items(lastcbs.ToArray()));
        f.Rows(listfr.ToArray());
        return f;
    }
</code></pre>
<p>在前台cshtml中这样使用:</p>
<pre><code>.RowsEx(1,
    F.TextBox().Label(&quot;姓名&quot;).DataField(&quot;Name&quot;).Required(true),
    F.DropDownList().Label(&quot;性别&quot;).DataField(&quot;Gender&quot;).Required(true)
     .Items(
        F.ListItem().Text(&quot;男&quot;).Value(&quot;1&quot;),
        F.ListItem().Text(&quot;女&quot;).Value(&quot;0&quot;)
        ),
    F.TextBox().Label(&quot;入学年份&quot;).DataField(&quot;EntranceYear&quot;),
    F.DropDownList().Label(&quot;是否在校&quot;).DataField(&quot;AtSchool&quot;)
     .Items(
        F.ListItem().Text(&quot;是&quot;).Value(&quot;1&quot;),
        F.ListItem().Text(&quot;否&quot;).Value(&quot;0&quot;)
        ),
    F.TextBox().Label(&quot;所学专业&quot;).DataField(&quot;Major&quot;),
    F.TextBox().Label(&quot;分组&quot;).DataField(&quot;Group&quot;)
)
</code></pre>
<p>第一个参数，完全可以读取配置指定，这样页面的布局就是动态的了。</p>
<blockquote>
<p>具体效果，可以在<a href="http://140.143.155.224:8086/#/Form/FormRowLayout">FineUIMVC扩展</a>中查看。</p>
</blockquote>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/njETBpqXu/" class="tag">
                    FineUICore
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/fineuicore-kuo-zhan-san/">
                  <h3 class="post-title">
                    FineUICore扩展（三）
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
